<template>
  <div>
    <a-spin :spinning="confirmLoading">
      <z-form-container :disabled="disableSubmit">
      <a-form-model slot="detail" layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="项目编号" >
              <a-input placeholder="请输入项目编号" disabled v-model="form.projectNo"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目名称" prop="projectName">
              <a-input placeholder="请输入项目名称" v-model="form.projectName"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目类型" prop="typeCode">
              <z-dict-select-tag v-model="form.typeCode" :defaultValue="true" dictCode="PROJECT_TYPE"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目负责人" prop="charger">
              <ZSelectUserByDep v-model="form.charger" :button="false" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目成员" prop="memberUserId">
              <ZSelectUserByDep @change="changeMemberUser" v-model="form.memberUserId" :button="false" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目开始日期" prop="beginDate" >
              <a-date-picker v-model.trim="form.beginDate" class="w-full" valueFormat="YYYY-MM-DD"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目结束日期" prop="endDate" >
              <a-date-picker v-model.trim="form.endDate" class="w-full" valueFormat="YYYY-MM-DD" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="收入预算总额" prop="revenueBudgetAmount">
              <a-input type="number" placeholder="请输入收入预算总额" v-model="form.revenueBudgetAmount">
                <span slot="suffix">元</span>
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="成本预算总额">
              <a-input type="number" placeholder="请输入成本预算总额" disabled v-model="form.costBudgetAmount">
                <span slot="suffix">元</span>
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="客户名称" >
              <a-input placeholder="请输入客户名称" disabled v-model="form.customerName"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="项目说明">
              <a-textarea v-model="form.projectDesc" placeholder="请输入项目说明" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="项目附件" >
              <ZUpload v-model="form.attachFile" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      </z-form-container>
      <a-tabs v-model="activeKey">
        <a-tab-pane tab="成本预算明细" :key="refKeys[0]" forceRender>
          <vxe-grid
            :ref="refKeys[0]"
            :columns="detail.column"
            :data="detail.dataSource"
            v-bind="vxeTableOption"
            :toolbar-config="false"
          >
          </vxe-grid>
        </a-tab-pane>
      </a-tabs>

    </a-spin>
  </div>
</template>

<script>
// 自定义表单，数据存储在业务表
import ModalFormMixin from '@/components/k-form-design/mixins/ModalFormMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import { CURY_TYPE } from '@/store/mutation-types'
import ZUpload from '@/components/zz/ZUpload'
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
import ZFormContainer from '@/components/zz/ZFormContainer'
import { getAction } from '@/services/manage'
export default {
  name: 'CustomForm2',
  components: { ZDictSelectTag, ZUpload, ZSelectUserByDep, ZFormContainer },
  mixins: [ModalFormMixin],
  data() {
    return {
      validatorRules: {
        projectName: [{ required: true, message: '请输入项目名称' }],
        typeCode: [{ required: true, message: '请选择项目类型' }],
        charger: [{ required: true, message: '请选择项目负责人' }],
        beginDate: [
          { required: true, message: '请选择开始日期' },
          { validator: this.validatorDate }
        ],
        endDate: [
          { required: true, message: '请选择结束日期' },
          { validator: this.validatorDate }
        ],
        revenueBudgetAmount: [
          { required: true, message: '请输入收入预算总额' },
          { validator: this.validatorMin }
        ],
        customerId: [{ required: true, message: '请选择客户编码' }]
      },
      url: {
        linelist: '', // 明细数据请求接口
        order: '' // 主单请求接口
      },
      detail: {
        column: [
          { type: 'seq', width: 40 },
          { title: '费用明细', field: 'costName', editRender: { name: 'AInput' }},
          { title: '费用分类', field: 'costClass', editRender: { name: 'ZDictSelectTag', props: { dictCode: 'MB_SYSTEM_YES_NO' }}},
          { title: '单价', field: 'unitPrice', editRender: { name: 'AInput', props: { type: 'number' }}},
          { title: '数量', field: 'quantity', editRender: { name: 'AInput', props: { type: 'number' }}},
          { title: '单位', field: 'unit', editRender: { name: 'ZDictSelectTag', props: { dictCode: 'MB_SYSTEM_YES_NO' }}, width: 120 },
          { title: '金额', field: 'amount' },
          { title: '备注', field: 'memo', editRender: { name: 'AInput' }}
        ],
        dataSource: []
      },
      refKeys: ['detail'],
      activeKey: 'detail'
    }
  },
  methods: {
    classifyIntoFormData() {
      const data = this.$refs[this.refKeys[0]].getRecordset()
      const tableData = this.setDataCrud(data)
      this.form.crudType = this.editType === 'add' ? CURY_TYPE.SAVE : CURY_TYPE.UPDATE
      tableData.forEach(item => {
        item.saveTransient = false
      })
      return {
        ...this.form,
        costLineList: [...tableData]
      }
    },
    async getData() {
      try {
        await this.getAllValidate()
        const formData = this.classifyIntoFormData()
        return formData
      } catch (error) {
        console.error(error)
        throw new Error(error)
      }
    },
    setData(data) { // 需要根据businessKey请求业务数据
      getAction(this.url.order + data.businessKey).then(res => {
        if (res.success) {
          this.form = res.result || {}
        } else {
          this.$message.warning(res.message)
        }
      })
      getAction(this.url.list + data.businessKey).then(res => {
        if (res.success) {
          this.detail.dataSource = res.result || []
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    updateBpmnStatus() {
      // 逻辑自行实现，主要为业务单更新流程审批状态使用

    }
  }
}
</script>

